<template>
  <div  class="app-container">
  <div style=" background-color: #fff; border-radius:10px; margin-bottom: 16px;">
    <el-table
    :data="tableData"
    :header-cell-style="headerCellStyle"
    border
    style="width: 100%; border-radius: 10px; margin-bottom: 14px;">
    <el-table-column
      v-for="(item, index) in tableTitle"
      :key="index"
          :prop="item.value"
          :label="item.label"
          align="center"
       >
      </el-table-column>
    <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
        <el-button
                type="success"
                size="mini"
                icon="el-icon-edit"
                @click="clickEvent(scope.row)"
              >
              修改配置
              </el-button>
      </template>
    </el-table-column>
  </el-table>
    <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.pageSize"
        @pagination="getPageList()"
      />
    <el-dialog :title="'修改配置'" :visible.sync="dialogSysVisible" top="3%">
      <div class="el-dialog-div">
        <update-sysConfig-from
          :updateSysConfigtemp="updateSysConfigtemp"
          @createPassword="createPassword"
          @dialogSysVisibleEmit="dialogSysVisibleEmit"
        />
      </div>
    </el-dialog>
  </div>
</div>
</template>
<script>
import UpdateSysConfigFrom from '@/views/systemConfiguration/components/updateSysConfigFrom.vue'
import BasicTable from '@/components/BasicTable/index.vue'
import Pagination from '@/components/BasicTable/Pagination'

import { getSysConfigList, updateSysConfig } from '@/api/systemConfiguration'
import { TipsBox } from '@/utils/feedback.js'
export default {
  name: 'UserManagement',
  components: { BasicTable, UpdateSysConfigFrom,Pagination },
  data() {
    return {
      dialogSysVisible: false,
      loading: false,
      tableData: null,
      total: 0, // 分页的总数，但是如果数量大于500，就最多可以看500条数据，页码控制到50页以内可以点击分页
      listQuery: {
        page: 1,
        pageSize: 10
      },
      tableTitle: [
      {
          label: '配置内容',
          value: 'Content',
          show: true,
          type: 'text'
        },
        {
          label: '数量',
          value: 'Value',
          show: true,
          type: 'text'
        },
        {
          label: '修改时间',
          value: 'UpdateTime',
          show: true,
          type: 'text'
        }
      ],
      dataSource: [],
      updateSysConfigtemp: {
        id: '',
        value: ''
      }
    }
  },
  created(){
    this.getPageList()
  },
  methods: {
    headerCellStyle(){ 
      return { background: '#FAFBFD', color: '#6D6D6D' }
    },
    clickEvent(row) {
                this.dialogSysVisible = true
                this.updateSysConfigtemp.id = row.Id
                this.updateSysConfigtemp.value = row.Value
              },
    getPageList(){
      this.loading = true
      getSysConfigList(this.listQuery).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.pageList
          this.total = res.data.count
        }
      })
      
    },
    createPassword(v) {
      this.loading = true
      updateSysConfig(v).then((res) => {
        this.loading = false
        if (res.code === 200) {
          TipsBox('success', res.message)
          this.dialogSysVisibleEmit(false)
          // 怎么重新加载数据？
          this.getPageList()
        }
      })
    },
    dialogSysVisibleEmit(v) {
      this.dialogSysVisible = v
    }

  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table {
  // 每行鼠标经过的样式
  .el-table__body tr:hover>td{
    background-color: rgba($color: #FAFBFD, $alpha: .9)!important;
  }
  .el-table__body tr.current-row>td{
    background-color: rgba($color: #FAFBFD, $alpha: .9)!important;
  }
}
</style>